<template>
  <div class="about">
    <h1>学生信息管理模块</h1>
    <div>
      <p>学号: <input v-model="student.stuNo"></p>
      <p>姓名: <input v-model="student.username"></p>
      <p>性别:
        <input type="radio" id="male" value="1" v-model="student.gender">
        <label for="male">男</label>&nbsp&nbsp
        <input type="radio" id="female" value="0" v-model="student.gender">
        <label for="female">女</label>
      </p>
      <p>年龄: <input v-model="student.age"></p>
      <p>
        年级:
        <select v-model="student.gradeID" name="site">
          <option value="1">大一</option>
          <option value="2">大二</option>
          <option value="3">大三</option>
          <option value="4">大四</option>
        </select>
      </p>
      <p>手机号: <input v-model="student.phone"></p>
      <p>邮箱: <input v-model="student.email"></p>
      <p><button @click="save">保存</button></p>
    </div>
  </div>
</template>

<script>
export default {
  name: "StudentView",
  data() {//数据定义区域
    return {
      student: {
        username: "tom",
        stuNo:"s001",
        gender:'1',
        age:18,
        gradeID:4,
        phone:'',
        email: 'abc@qq.com'
      }
    }
  },
  methods: {//方法定义区域
    //保存数据
    save(){
      // todo 验证姓名不能为空，年龄必须是1~100
      if (this.student.age>100 || this.student.age<1){
        alert('年龄不正确，必须在1~100之间')
      }
    }
  }
}
</script>

<style scoped>

</style>